<template>
  <div>
    <div class="topbanner">
      <div class="banner">
        <div class="logo">
          <img src="../../../assets/img/logo@3x.png" />
        </div>
        <div class="title">
          <h2>管理员登录</h2>
        </div>
      </div>
    </div>

     <!-- 登录盒子 -->
     <div class="ulogin_box">
      <!-- 卡片 -->
      <el-card class="box_card">
        <div slot="header" class="clearfix" style="margin-left:185px;">
    <h2>管理员系统</h2>
    </div>
        <!-- 登录表单 -->
        <el-form
          :model="loginForm"
          status-icon
          :rules="rules"
          ref="loginForm"
          label-width="25px"
          class="demo-loginForm"

        >
        <br /><br />
        <el-form-item  prop="adname">
            <el-input 
               type="phone" 
               v-model.lazy="loginForm.adname" 
               autocomplete="off" 
               placeholder="请输入用户名" >
            </el-input>
          </el-form-item>
    
        <!-- 密码 -->
          <el-form-item prop="pwd">
            <el-input 
               type="password" 
               v-model.lazy="loginForm.pwd" 
               autocomplete="off" 
               placeholder="请输入密码">
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd2">
            <el-input 
                type="password" 
                v-model.lazy="loginForm.pwd2" 
                autocomplete="off" 
                placeholder="确认密码">
            </el-input>
          </el-form-item>
         <!-- 登录提交按钮 -->
          <el-form-item class="button">
            <el-row :gutter="120">
              <el-col :span="12">
                <el-button 
                   style="width:100%;background:#7440d8;color:azure;border:none;" 
                   @click="submitForm('loginForm')">登  录</el-button>
              </el-col>
              <el-col :span="12">
                <el-button style="width:100%;" @click="resetForm('loginForm')">重  置</el-button>
              </el-col>
            </el-row>
           
          </el-form-item>
        </el-form>
      </el-card>

    </div>
  </div>
</template>

<script>
export default {
  

  data() {
      // 用户名
      var adname = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else {
         callback(new Error('长度在 2 到 10 个字符'))
        
      }
    };
      // 密码
      var pwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.loginForm.pwd2 !== '') {
            this.$refs.loginForm.validateField('pwd2');
          }
          callback();
        }
      };
      var pwd2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.loginForm.pwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
      // 验证loginForm对象属性
      loginForm: {
          adname:'',
          pwd: '',
          pwd2: '',
        },
        // 验证规则:属性名称要和表单对象的属性名称保持一致，否则会失效
        rules: {
           // 用户名
           adname: [ // 用户名校验规则
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          // 密码
          pwd: [
            { validator: pwd, trigger: 'blur' },
            { min: 6,max: 10,message: '长度在 6 到 10个字符'}, 
		        {pattern: /^(\w){6,10}$/, message: '只能输入6-10个字母、数字、下划线'},
          ],
          // 二次密码
          pwd2: [
            { validator: pwd2, trigger: 'blur' },
          ],
       
        }
      };
  },

  mounted() {
    
  },

  methods: {
   
    // 点击登录
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(666);
            this.$axios({
                url:'/adminlogin',
                method:'POST',
                data:{
                    adname:this.loginForm.adname,
                    // code:this.loginForm.code,
                    pwd:this.loginForm.pwd,
                    // pwd2:this.loginForm.pwd2,
                }
            }).then(res=>{
              console.log(res);
              if(res.data.code === 2006){
                 // 成功后提示
                 this.$message({
                         message:'成功登录,欢迎来到该网页',
                         type:'success'
                })
                 // //成功之后跳转主页
            this.$router.push({path:'/ym'})
              }else if(res.data.code === 4008){
                this.$message.error('密码错误')
              }else if(res.data.code === 4007) {
                    this.$message.error('用户不存在')
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    
  },
};
</script>

<style scoped>
.topbanner {
  height: 80px;
  width: 100%;
  background-color: #f8f7fb;
}
.banner {
  width: 1060px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  justify-content: left;
}
.banner .logo {
  width: 152px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner .logo img {
  width: 152px;
  height: 55px;
}
.banner .title {
  margin-left: 50px;
  margin-top: 40px;
  color: #333333;
}
/* 登录大盒子 */
.ulogin_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 卡片 */
.box_card {
  margin-top: 50px;
  width: 500px;
  height: 320px;
  background-color: #fcfcfc;
}
.loginFrom {
  height: 200px;
  width: 300px;
  box-shadow: 00 25px #cac6c6;
}
.button {
  margin-left: 90px;
  margin-top: 30px;
}
.span {
  color: #555454;
  font-size: 10px;
  margin-left: 10px;
}

</style>